<template>
	<view class="searchPage">
		<div class="searchBox">
			<div class="back" @click="back">
				<uni-icons type="left" size="24"></uni-icons>
			</div>
			<div class="searchBoxInput">
				<uni-easyinput @confirm="confirmInput" class="searchInput" prefixIcon="search" placeholder="请输入内容进行查询">
				</uni-easyinput>
			</div>
		</div>
		<div style="height: 72px;"></div>
		<div class="titleBox">
			<span>历史</span>
			<uni-icons type="trash" size="20"></uni-icons>
		</div>
		<div class="tags">
			<uni-tag class="tagItem" v-for="item in 10" :key="item" text="标签" />
		</div>
		<div class="titleBox">
			<span>人物</span>
		</div>
		<div class="photos">
			<div class="photosItem" v-for="item in 5" :key="item">
				<div class="top round">
					<image class="image" src="https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF"
						mode="aspectFill"></image>
				</div>
			</div>
		</div>
		<div class="titleBox">
			<span>地点</span>
		</div>
		<div class="photos">
			<div class="photosItem" v-for="item in 5" :key="item">
				<div class="top">
					<image class="image" src="https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF"
						mode="aspectFill"></image>
				</div>
				<div class="bottom">
					<span class="title">地点</span>
				</div>
			</div>
		</div>
		<div class="titleBox">
			<span>分类</span>
		</div>
		<div class="photos">
			<div class="photosItem" v-for="item in 5" :key="item">
				<div class="top">
					<image class="image" src="https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF"
						mode="aspectFill"></image>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			confirmInput(e) {
				console.log(e);
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.is-input-border {
		border-radius: 40rpx;
	}

	.searchPage {
		width: 100%;
		height: 100%;
	}

	.searchBox {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding-top: 70rpx;
		position: fixed;
		width: 100%;

		.back {
			padding: 10rpx;
		}

		.searchBoxInput {
			flex: 1;
			padding: 10rpx;

			.searchInput {
				width: 100%;
			}
		}
	}

	.titleBox {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		font-size: 32rpx;
		align-items: center;

		span {
			font-weight: 700;
		}
	}

	.tags {
		padding: 0 30rpx;
		display: flex;
		flex-wrap: wrap;

		.tagItem {
			border-radius: 40rpx;
			background-color: #eee;
			border: #eee;
			padding: 15rpx 30rpx;
			color: #000;
			font-size: 28rpx;
			margin-bottom: 10rpx;
			margin-right: 10rpx;
		}
	}

	.photos {
		display: flex;
		overflow-x: auto;

		.photosItem {
			margin: 20rpx;
			margin-top: 0;
			flex-shrink: 0;

			.top {
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}

			.round {
				border-radius: 50%;
				width: 160rpx;
				height: 160rpx;
			}

			.bottom {

				span {
					display: block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.title {
					margin-top: 10rpx;
					font-size: 32rpx;
					font-weight: 700;
				}

				.number {
					font-size: 28rpx;
					color: #999;
				}
			}
		}
	}
</style>
